<template>
  <div class="row video-list-item">
    <q-img width="140px" height="80px" :src="video.coverImage" />
    <div class="q-ml-sm fit column col justify-around no-wrap">
      <div class="video-title one-line-text">{{ video.title }}</div>
      <div class="row">
        <q-avatar style="width:18px;height:18px">
          <q-img :src="video.creatorAvatar" />
        </q-avatar>
        <div
          class="text-sub one-line-text q-ml-xs"
          style="max-width:80%"
        >{{ video.creatorName }} · {{ video.createTimeHuman }}</div>
      </div>
      <div class="row items-center q-gutter-x-sm">
        <h-icon-num icon="mdi-play" :label="video.viewCount" />
        <h-icon-num icon="mdi-star" :label="video.complimentsCount" />
        <lang-chip v-if="video.currentAudio" :code="video.currentAudio?.langCode"></lang-chip>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { PropType } from 'vue';
import Video from 'src/models/Video';
import HIconNum from '../utils/HIconNum.vue';
import LangChip from '../LanguageChip.vue';
const props = defineProps({
  video: {
    type: Object as PropType<Video>,
    required: true,
  }
})
</script>
<style lang="scss" scoped>
.video-list-item {
  width: 100%;
  height: 80px;
  background-color: #242424;
  font-size: 12px;
  .video-title {
    max-width: 100%;
  }
}
</style>
